<template>
    <a-layout style="height: 100%;">
        <PluginComp Plugin="Portal.Header" style="width:100%">
            <template #Setting>
                <a-flex justify="space-between" align="center" :style="{ height: '48px', padding: '8px' }">
                    <PluginComp Plugin="Theme.Button" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a-button type="primary">保存</a-button>
                </a-flex>
            </template>
        </PluginComp>
        <a-layout-content class="Content">
            <div class="CodeBox" :style="{ right: right + '%' }">CodeBox</div>
            <div class="Options" :style="{ left: 100 - right + '%' }">Options</div>
            <div class="LayoutMoveBar" :class="{ state: State }" @mousedown="StarDragMoveBar"
                :style="{ right: right + '%' }">
                <div class="BarColor" :style="{ background: token.colorBorder }"></div>
            </div>
        </a-layout-content>
    </a-layout>
</template>

<script setup>
import { ref } from 'vue';
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();



const State = ref(false);
const right = ref(40);
const MouseUp = function () {
    State.value = false;
    window.removeEventListener('mousemove', MouseEvent, true);
    window.removeEventListener('mouseup', MouseUp, true);
}

const MouseEvent = function (event) {
    const x = event.pageX;
    const width = document.body.clientWidth;

    let left = x / width;
    const _R = 100 - left * 100;

    if (_R < 20) {
        right.value = 20;
    } else if (_R > 80) {
        right.value = 80;
    } else {
        right.value = _R;
    };
};

const StarDragMoveBar = function (event) {
    State.value = true;
    window.addEventListener('mousemove', MouseEvent, true);
    window.addEventListener('mouseup', MouseUp, true);
};
</script>

<style lang="less" scoped>
.Content {
    position: relative;
    user-select: none;
}

.CodeBox {
    position: absolute;
    height: 100%;
    left: 0;
}

.Options {
    position: absolute;
    height: 100%;
    right: 0;
    border-left: 1px solid #e8e8e8;
}

.LayoutMoveBar {
    width: 5px;
    height: 100%;
    position: absolute;
    right: 320px;
    top: 0;
    cursor: e-resize;
    z-index: 10;
    transform: translate(1.5px, 0);

    .BarColor {
        width: 100%;
        height: 100%;
        display: none;
    }

    &:hover {
        .BarColor {
            display: block;
        }
    }

    &.state {
        .BarColor {
            display: block;
        }
    }
}
</style>
